<template>
  <div class="home-content">
    <section class="what">
      <h1>What does this sample have?</h1>
      <div class="card-container">
        <div class="card top card-animation">
          <svg
            class="lazyload"
            id="videocall"
            enable-background="new 0 0 24 24"
            height="112"
            viewBox="0 0 24 24"
            width="112"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m18.25 23.5c-.104 0-.21-.022-.308-.066l-5-2.25c-.27-.121-.442-.389-.442-.684v-5c0-.295.173-.563.442-.684l5-2.25c.231-.104.502-.083.715.054.214.138.343.376.343.63v9.5c0 .254-.129.492-.343.63-.123.079-.264.12-.407.12z"
              fill="#1e88e5"
            />
            <path
              d="m11.75 24h-9.5c-1.24 0-2.25-1.009-2.25-2.25v-7.5c0-1.241 1.01-2.25 2.25-2.25h9.5c1.24 0 2.25 1.009 2.25 2.25v7.5c0 1.241-1.01 2.25-2.25 2.25z"
              fill="#2196f3"
            />
            <path
              d="m15.75 11c-.091 0-.184-.017-.272-.051-.288-.112-.478-.39-.478-.699v-2.25h-1.25c-.965 0-1.75-.785-1.75-1.75v-4.5c0-.965.785-1.75 1.75-1.75h8.5c.965 0 1.75.785 1.75 1.75v4.5c0 .965-.785 1.75-1.75 1.75h-3.42l-2.527 2.757c-.145.158-.347.243-.553.243z"
              fill="#ffc107"
            />
            <g fill="#fafafa">
              <circle cx="15.5" cy="4" r=".75" />
              <circle cx="18" cy="4" r=".75" />
              <circle cx="20.5" cy="4" r=".75" />
            </g>
          </svg>
          <h3>Private Chats and Video Calls</h3>
          <p>Setup an instant connection for two way data flow with only 3/5 firebase firestore writes. Free tier inclues 50k daily writes.</p>
        </div>
        <div class="card top card-animation">
          <svg
            class="lazyload"
            id="secuirty"
            enable-background="new 0 0 512 512"
            height="112"
            viewBox="0 0 512 512"
            width="112"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g>
              <g>
                <g>
                  <path d="m184.84 396.349h87.883v75.955h-87.883z" fill="#e2e9ee" />
                  <path d="m228.781 396.349h43.942v75.955h-43.942z" fill="#bbd0d5" />
                </g>
                <g>
                  <path
                    d="m382.399 487.304h-309.245c-8.277 0-14.988-6.716-14.988-15s6.71-15 14.988-15h309.245c8.277 0 14.988 6.716 14.988 15 0 8.285-6.71 15-14.988 15z"
                    fill="#fbf4f4"
                  />
                  <path
                    d="m382.399 457.304h-153.617v30h153.617c8.277 0 14.988-6.716 14.988-15s-6.71-15-14.988-15z"
                    fill="#e2e9ee"
                  />
                </g>
                <g>
                  <g>
                    <path
                      d="m17.775 401.199-17.775-53.219v-296.6c0-14.714 11.961-26.684 26.663-26.684h402.448c14.702 0 26.663 11.97 26.663 26.684v296.6l-17.775 53.219z"
                      fill="#425796"
                    />
                    <path
                      d="m429.111 24.696h-200.33v376.503h209.217l17.775-53.219v-296.6c0-14.714-11.96-26.684-26.662-26.684z"
                      fill="#283758"
                    />
                  </g>
                  <g>
                    <path
                      d="m0 347.98v44.325c0 14.714 11.961 26.684 26.663 26.684h402.448c14.702 0 26.663-11.971 26.663-26.684v-44.325z"
                      fill="#fbf4f4"
                    />
                    <path
                      d="m228.781 347.98v71.009h200.33c14.702 0 26.663-11.971 26.663-26.684v-44.325z"
                      fill="#e2e9ee"
                    />
                  </g>
                </g>
              </g>
              <g>
                <g>
                  <path
                    d="m424.816 109.225c-29.98.712-56.122 16.925-70.721 40.932l-184.009-.057v76l59.408-.676c1.502-.027 2.913-.728 3.841-1.91l9.055-11.523 54.681-.147-.066 7.688c-.025 2.835 2.311 5.124 5.145 5.041l44.661-1.3c11.847 32.759 43.219 56.173 80.065 56.173 47.694 0 86.228-39.226 85.098-87.176-1.099-46.736-40.422-84.156-87.158-83.045z"
                    fill="#f4d844"
                  />
                  <g>
                    <path
                      d="m170.086 192.269v33.831l59.408-.676c1.502-.027 2.913-.728 3.841-1.91l9.056-11.523 54.681-.147-.066 7.688c-.024 2.836 2.311 5.124 5.145 5.041l44.661-1.3c11.847 32.759 43.219 56.173 80.065 56.173 47.694 0 86.227-39.225 85.098-87.176h-341.889z"
                      fill="#ecbd2c"
                    />
                    <g>
                      <path
                        d="m451.239 207.251c-6.243 0-12.033-4.05-14.114-9.947-2.083-5.903-.266-12.674 4.604-16.653 4.865-3.975 11.829-4.468 17.217-1.26 5.377 3.2 8.234 9.656 7.002 15.79-1.389 6.926-7.637 12.07-14.709 12.07z"
                        fill="#283758"
                      />
                    </g>
                  </g>
                </g>
                <path
                  d="m175.086 316.886c-8.284 0-15-6.716-15-15v-219.163c0-8.284 6.716-15 15-15s15 6.716 15 15v219.163c0 8.284-6.716 15-15 15z"
                  fill="#182135"
                />
              </g>
            </g>
          </svg>
          <h3>Authentication and Login</h3>
          <p>Stream live video, share your screen, add video affects - send live messaging. Perfect for gaming platforms like Google Stadia</p>
        </div>
        <div class="card top card-animation">
          <svg
            class="lazyload"
            id="reconnect"
            height="112"
            viewBox="0 0 64 64"
            width="112"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g id="Flat">
              <g id="Color">
                <g>
                  <g>
                    <path
                      d="m49 56h-34l13.09-41.141a4.1 4.1 0 0 1 3.91-2.859 4.1 4.1 0 0 1 3.91 2.859z"
                      fill="#f89c8d"
                    />
                    <path
                      d="m37.676 49a10 10 0 0 1 -9.529-13.032l4.1-12.883 7.7 4.443-4.037-12.669a4.1 4.1 0 0 0 -7.82 0l-13.09 41.141h34l-2.227-7z"
                      fill="#f8664f"
                    />
                    <g fill="#f9e109">
                      <rect height="6" rx="3" width="42" x="11" y="55" />
                      <path d="m17.227 49h29.546l-1.909-6h-25.728z" />
                      <path d="m41.364 32h-18.728l-1.909 6h22.546z" />
                    </g>
                    <path
                      d="m37.68 49h-20.45l1.91-6h9.37a9.973 9.973 0 0 0 9.17 6z"
                      fill="#fcbc04"
                    />
                    <path
                      d="m29.41 32-1.26 3.97a9.289 9.289 0 0 0 -.42 2.03h-7l1.91-6z"
                      fill="#fcbc04"
                    />
                    <path
                      d="m14 55a3 3 0 0 0 0 6h36a3 3 0 0 0 3-3h-36a3 3 0 0 1 -3-3z"
                      fill="#fcbc04"
                    />
                  </g>
                  <g>
                    <path
                      d="m36.527 5.01a10 10 0 0 1 10 10v2a0 0 0 0 1 0 0h-20a0 0 0 0 1 0 0v-2a10 10 0 0 1 10-10z"
                      fill="#fcbc04"
                      transform="matrix(.866 .5 -.5 .866 10.399 -16.788)"
                    />
                    <path
                      d="m39.527 5.814a9.95 9.95 0 0 0 -4.195-1.3l-1.532 7.228 1.732 1 4.669-6.5c-.223-.142-.442-.294-.674-.428z"
                      fill="#e59730"
                    />
                    <rect
                      fill="#f9e109"
                      height="4"
                      rx="2"
                      transform="matrix(.866 .5 -.5 .866 13.327 -13.86)"
                      width="26"
                      x="19.527"
                      y="15.938"
                    />
                    <path
                      d="m37.259 13.742-3.464-2 3.679-8.153a1 1 0 0 1 1.411-.455l3.283 1.9a1 1 0 0 1 .312 1.45z"
                      fill="#f9e109"
                    />
                    <path
                      d="m34.161 13.108a5 5 0 0 1 -1.831-6.83l.994-1.72a9.977 9.977 0 0 0 -7.458 4.916l-1 1.732 17.321 10 1-1.732a9.981 9.981 0 0 0 .456-.891z"
                      fill="#e59730"
                    />
                    <path
                      d="m37.144 7.224 1.824-4.042-.083-.048a1 1 0 0 0 -1.411.455l-3.674 8.153 3.464 2a7.626 7.626 0 0 1 -.12-6.518z"
                      fill="#fcbc04"
                    />
                    <path
                      d="m24 10.706a2 2 0 1 0 -2 3.464l19.053 11a2 2 0 0 0 2.732-.732l-19.053-11a2 2 0 0 1 -.732-2.732z"
                      fill="#fcbc04"
                    />
                    <path
                      d="m40.358 14.376a.953.953 0 0 1 -.2-.148 1 1 0 0 1 -.024-1.413l2.866-2.964a1 1 0 0 1 1.438 1.39l-2.866 2.964a1 1 0 0 1 -1.214.171z"
                      fill="#f9e109"
                    />
                    <path
                      d="m31.7 9.376a1 1 0 0 1 -.461-1.141l1.134-3.964a1 1 0 0 1 1.923.55l-1.138 3.964a1 1 0 0 1 -1.462.591z"
                      fill="#f9e109"
                    />
                    <g fill="#fcbc04">
                      <path
                        d="m41 13.315 2.866-2.964a.994.994 0 0 1 .7-.3.979.979 0 0 0 -.151-.22 1 1 0 0 0 -1.415.02l-2.866 2.964a1 1 0 0 0 .024 1.413.953.953 0 0 0 .2.148.975.975 0 0 0 .511.121.985.985 0 0 1 .131-1.182z"
                      />
                      <path
                        d="m32.1 8.735 1.134-3.964a.985.985 0 0 1 .97-.707 1 1 0 0 0 -1.836.207l-1.133 3.964a1 1 0 0 0 .465 1.141.989.989 0 0 0 .226.1.943.943 0 0 0 .279.022.985.985 0 0 1 -.105-.763z"
                      />
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </svg>
          <h3>Auto Reconnect for Disconnects</h3>
          <p>Auto reconnect the receiver if they lose connection or refresh the page</p>
        </div>
      </div>
    </section>

    <section class="where">
      <h1>Where can I check it out?</h1>

      <div id="whereRTC" class="card-container">
        <div class="card card-animation left darker-shadow">
          <svg
            class="lazyload"
            id="Capa_2"
            enable-background="new 0 0 512 512"
            height="512"
            viewBox="0 0 512 512"
            width="512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g>
              <path
                d="m467 512h-422c-24.813 0-45-20.187-45-45v-332c0-8.284 6.716-15 15-15h482c8.284 0 15 6.716 15 15v332c0 24.813-20.187 45-45 45z"
                fill="#e1f0ff"
              />
              <path
                d="m497 120h-241v392h211c24.813 0 45-20.187 45-45v-332c0-8.284-6.716-15-15-15z"
                fill="#bedcf0"
              />
              <path
                d="m467 0h-422c-24.813 0-45 20.187-45 45v90h512v-90c0-24.813-20.187-45-45-45z"
                fill="#5e54ac"
              />
              <path d="m467 0h-211v135h256v-90c0-24.813-20.187-45-45-45z" fill="#453d81" />
              <path
                d="m181 372h-120c-8.284 0-15-6.716-15-15v-20c0-41.355 33.645-75 75-75s75 33.645 75 75v20c0 8.284-6.716 15-15 15z"
                fill="#8bb9ff"
              />
              <path
                d="m121 262c-.335 0-.666.021-1 .025v109.975h61c8.284 0 15-6.716 15-15v-20c0-41.355-33.645-75-75-75z"
                fill="#4793ff"
              />
              <circle cx="76" cy="67.5" fill="#ff6378" r="15" />
              <circle cx="136" cy="67.5" fill="#00ff93" r="15" />
              <circle cx="196" cy="67.5" fill="#ffe278" r="15" />
              <g fill="#453d81">
                <path
                  d="m466 212h-180c-8.284 0-15-6.716-15-15s6.716-15 15-15h180c8.284 0 15 6.716 15 15s-6.716 15-15 15z"
                />
                <path
                  d="m466 272h-180c-8.284 0-15-6.716-15-15s6.716-15 15-15h180c8.284 0 15 6.716 15 15s-6.716 15-15 15z"
                />
                <path
                  d="m466 332h-180c-8.284 0-15-6.716-15-15s6.716-15 15-15h180c8.284 0 15 6.716 15 15s-6.716 15-15 15z"
                />
              </g>
              <path
                d="m466 452h-60c-8.284 0-15-6.716-15-15v-60c0-8.284 6.716-15 15-15h60c8.284 0 15 6.716 15 15v60c0 8.284-6.716 15-15 15z"
                fill="#ffb454"
              />
              <path
                d="m346 452h-60c-8.284 0-15-6.716-15-15v-60c0-8.284 6.716-15 15-15h60c8.284 0 15 6.716 15 15v60c0 8.284-6.716 15-15 15z"
                fill="#ffb454"
              />
              <path
                d="m171 432h-110c-8.284 0-15-6.716-15-15s6.716-15 15-15h110c8.284 0 15 6.716 15 15s-6.716 15-15 15z"
                fill="#5e54ac"
              />
              <path
                d="m121 292c-30.327 0-55-24.673-55-55s24.673-55 55-55 55 24.673 55 55-24.673 55-55 55z"
                fill="#ffc3aa"
              />
              <path
                d="m121 182c-.335 0-.666.019-1 .025v109.949c.334.006.665.025 1 .025 30.327 0 55-24.673 55-55s-24.673-54.999-55-54.999z"
                fill="#faaa8c"
              />
            </g>
          </svg>
          <h3>Create an Account</h3>
          <p>Sign up for an account and add contacts</p>
          <p>Create private video calls and chats with other contacts</p>
          <button @click="register">Register an Account</button>
        </div>
        <div class="card card-animation right darker-shadow">
          <svg
            class="lazyload"
            id="Capa_1"
            enable-background="new 0 0 512 512"
            height="512"
            viewBox="0 0 512 512"
            width="512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m444.394 3.996h-285.072c-37.183 0-67.606 30.423-67.606 67.606v23.004h257.871c37.183 0 67.606 30.423 67.606 67.606v168.547h27.201c37.183 0 67.606-30.423 67.606-67.606v-191.551c0-37.184-30.423-67.606-67.606-67.606z"
              fill="#6c7ed6"
            />
            <path
              d="m396.461 91.515h-285.072c-6.836 0-13.441 1.036-19.673 2.946v.145h257.871c37.183 0 67.606 30.423 67.606 67.606v168.547h27.2c6.836 0 13.441-1.036 19.673-2.946v-168.692c.001-37.183-30.422-67.606-67.605-67.606z"
              fill="#4f67d2"
            />
            <path
              d="m352.678 91.515h-285.072c-37.183 0-67.606 30.423-67.606 67.606v191.55c0 37.183 30.423 67.606 67.606 67.606h171.096c7.335 0 12.811 6.826 11.133 13.966-4.537 19.317-11.48 39.745-21.744 60.686-4.609 9.405 5.876 18.966 14.782 13.454 25.751-15.937 62.389-42.61 93.244-80.317 4.056-4.957 10.156-7.79 16.561-7.79 37.183 0 67.606-30.423 67.606-67.606v-191.55c0-37.182-30.423-67.605-67.606-67.605z"
              fill="#60b8fe"
            />
            <path
              d="m293.618 432.243c1.677-7.141-3.798-13.966-11.133-13.966h-43.783c7.335 0 12.81 6.825 11.133 13.966-4.537 19.317-11.48 39.745-21.744 60.686-4.609 9.405 5.876 18.966 14.782 13.454 9.88-6.115 21.365-13.816 33.509-23.108 7.832-17.563 13.399-34.696 17.236-51.032z"
              fill="#23a8fe"
            />
            <path
              d="m43.783 350.671v-191.55c0-37.183 30.423-67.606 67.606-67.606h-43.783c-37.183 0-67.606 30.423-67.606 67.606v191.55c0 37.183 30.423 67.606 67.606 67.606h43.783c-37.184 0-67.606-30.422-67.606-67.606z"
              fill="#23a8fe"
            />
            <g fill="#dfebfa">
              <circle cx="93.714" cy="260.397" r="22.434" />
              <circle cx="166.174" cy="260.397" r="22.434" />
              <circle cx="238.633" cy="260.397" r="22.434" />
              <circle cx="311.093" cy="260.397" r="22.434" />
            </g>
            <path
              d="m93.714 260.397c0-8.302 4.514-15.546 11.217-19.425-3.301-1.91-7.129-3.009-11.217-3.009-12.39 0-22.434 10.044-22.434 22.434s10.044 22.434 22.434 22.434c4.088 0 7.917-1.099 11.217-3.009-6.704-3.879-11.217-11.123-11.217-19.425z"
              fill="#b1dbfc"
            />
            <path
              d="m166.174 260.397c0-8.302 4.514-15.546 11.217-19.425-3.301-1.91-7.129-3.009-11.217-3.009-12.39 0-22.434 10.044-22.434 22.434s10.044 22.434 22.434 22.434c4.088 0 7.916-1.099 11.217-3.009-6.704-3.879-11.217-11.123-11.217-19.425z"
              fill="#b1dbfc"
            />
            <path
              d="m238.633 260.397c0-8.302 4.514-15.546 11.217-19.425-3.301-1.91-7.13-3.009-11.217-3.009-12.39 0-22.434 10.044-22.434 22.434s10.044 22.434 22.434 22.434c4.088 0 7.917-1.099 11.217-3.009-6.703-3.879-11.217-11.123-11.217-19.425z"
              fill="#b1dbfc"
            />
            <path
              d="m311.093 260.397c0-8.302 4.513-15.546 11.217-19.425-3.301-1.91-7.13-3.009-11.217-3.009-12.39 0-22.434 10.044-22.434 22.434s10.044 22.434 22.434 22.434c4.088 0 7.917-1.099 11.217-3.009-6.704-3.879-11.217-11.123-11.217-19.425z"
              fill="#b1dbfc"
            />
          </svg>
          <h3>Try a test Call or Chat</h3>
          <p>Setup a private room and share a url for another user to connect</p>
          <p>Use the video and chat service and test the real time connection</p>
          <button @click="openChat">Open a Chat Room</button>
        </div>
      </div>
    </section>
    <section class="use-cases">
      <div class="card-container title">
        <div class="card">
          <h1>Web RTC share</h1>
          <img class="lazyload" :data-src="require('../assets/webrtcshare.png')" />
        </div>
      </div>
      <h1>Big Companies Using WebRtc Now</h1>
      <div class="card-container">
        <div class="card card-animation left">
          <div class="img-container">
            <img class="hangouts lazyload" :data-src="require('../assets/hangouts.jpg')" />
          </div>
          <p>Google had their own video conferencing service, working from Gmail, but it needed a plugin. Real time video just wasn’t there in the browser, which is where and why WebRTC started</p>
          <p>Hangouts accounts for 4-5% of all voice and video traffic in WebRTC.</p>
        </div>
        <div class="card card-animation right">
          <div class="img-container">
            <img class="facebook lazyload" :data-src="require('../assets/facebook.png')" />
          </div>
          <p>Here’s where Facebook have integrated WebRTC</p>
          <ul>
            <li>Messenger – video chat and group video chat, mobile and browser</li>
            <li>Facebook Live – when co-broadcasting</li>
            <li>VR Chat – video calls in Oculus</li>
            <li>Then there’s Workplace by Facebook and Instagram Live Video Chat</li>
          </ul>
        </div>
      </div>
    </section>
    <section class="why">
      <h1>Why Web RTC & Firebase / Vuejs</h1>
      <div class="card-container">
        <div class="card card-animation left darker-shadow">
          <img class="firebase lazyload" :data-src="require('../assets/firebase.png')" />
          <h3>Firebase</h3>
          <p>Setup an instant connection for two way data flow with only 3/5 firebase firestore writes. Free tier inclues 50k daily writes.</p>
          <p>Firebase Authentication is used to create private user chat groups</p>
        </div>
        <div class="card card-animation right darker-shadow">
          <img class="vue lazyload" :data-src="require('../assets/logo.png')" />
          <h3>Vue js</h3>
          <p>Perfect for Protoyping and large scale projects alike, Vue provides intuitive structure for Js Web applications</p>
          <p>Extract WebRTC as a mixin or component that can be easily resused</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "HomeContent",
  methods: {
    openChat() {
      this.$router.push("/video-call");
    },
    register() {
      this.$router.push("/login");
    },
    startCardAnimationIntersectionObserver() {
      const cards = document.querySelectorAll(".card-animation");

      const handleIntersection = entries => {
        entries.map(entry => {
          if (entry.isIntersecting) {
            console.log(entry.target, "Entry");
            if (entry.target.classList.contains("left")) {
              entry.target.classList.add("slide-in-from-left");
            } else if (entry.target.classList.contains("top")) {
              entry.target.classList.add("slide-in-from-top");
            } else {
              entry.target.classList.add("slide-in-from-right");
            }

            observer.unobserve(entry.target);
          }
        });
      };

      const observer = new IntersectionObserver(handleIntersection);

      cards.forEach(card => observer.observe(card));
    },
    startImageIntersectionObserver() {
      let options = {
        rootMargin: "0px",
        threshold: 1.0
      };
      const images = document.querySelectorAll(".lazyload");

      const handleIntersection = entries => {
        entries.map(entry => {
          if (entry.isIntersecting) {
            if (entry.target.dataset.src) {
              entry.target.src = entry.target.dataset.src;
            }
            entry.target.classList.add("loaded");
            observer.unobserve(entry.target);
          }
        });
      };

      const observer = new IntersectionObserver(handleIntersection, options);

      images.forEach(image => observer.observe(image));
    }
  },

  mounted() {
    this.startImageIntersectionObserver();
    this.startCardAnimationIntersectionObserver();
  }
};
</script>

<style lang="scss" scoped>
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.right {
  will-change: transform;
  transform-origin: right;
  transform: translateX(100%);
  transition: 0.5s ease-in-out;
}
.slide-in-from-right {
  animation: slideInFromRight 0.7s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.left {
  will-change: transform;
  transform-origin: left;
  transform: translateX(-100%);
}
.slide-in-from-left {
  animation: slideInFromLeft 0.7s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0%);
  }
}
.top {
  will-change: transform;
  transform-origin: left;
  transform: translateY(150px);
}
.slide-in-from-top {
  animation: slideInFromTop 0.7s ease-in-out;
  animation-fill-mode: forwards;
}

svg#videocall,
svg#secuirty,
svg#reconnect,
svg#Capa_1,
svg#Capa_2 {
  width: 100%;
  max-width: 90px;
  height: 100%;
  max-height: 90px;
  background-color: whitesmoke;
  border-radius: 50%;
  padding: 0.5rem;
  margin: auto;
}
section {
  padding: 0.5rem;
}
img.lazyload,
svg.lazyload {
  opacity: 0.1;
  visibility: hidden;
  transform: scale(0.81) translateY(-50px);
  will-change: transform opacity;
  transition: 1s ease-in-out;
}
img.loaded,
svg.loaded {
  visibility: visible;

  opacity: 1;
  transform: scale(1) translateY(0px);
}
div.home-content {
  background: whitesmoke;
  width: 100vw;
  overflow: hidden;

  margin-top: 3rem;
  .card-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding: 0.1rem;
    padding-top: 0;
    &.title {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      padding: 0.1rem;
      padding-top: 0;
      .card {
        img {
          width: calc(100% - 2rem);
        }
      }
    }
    .card {
      background-color: white;
      margin: 2rem auto;
      padding: 2rem 1rem;
      width: calc(100% - 4rem);
      width: calc(100% - 3rem);

      border-radius: 3px;
      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      &.darker-shadow {
        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.42),
          0px 1px 1px 0px rgba(0, 0, 0, 0.41),
          0px 1px 3px 0px rgba(0, 0, 0, 0.32);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        img {
          margin: auto;
        }
      }
      .img-container {
        min-height: 156px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        width: 100%;
      }
      button {
        margin: auto;
        height: 3rem;
        min-width: 70%;
        border-radius: 4px;
        text-transform: uppercase;
        cursor: pointer;
        outline: none;
        background-color: dodgerblue;
        color: white;
        font-size: 1rem;
        letter-spacing: 1px;
        font-weight: 600;
        margin-top: 1rem;
        box-shadow: 0px 0px 8px 3px #8080804a;
        max-width: 300px;
        transition: 0.3s ease-in-out;
        &:hover {
          background-color: #175796;
        }
      }
      img {
        width: 100%;
        &.hangouts {
          max-width: 250px;
          margin: auto;
        }
        &.facebook {
          max-width: 83px;
          margin: auto;
        }
        &.firebase {
          max-width: 80px;
        }
        &.vue {
          max-width: 100px;
        }
      }
      p {
        max-width: 80%;
        margin: 10px auto;
      }
      ul {
        list-style: none;
        padding-left: 0;
        max-width: 80%;
        margin: 10px auto;
      }
    }
  }
}
section.where,
section.why {
  background: white;
  padding-top: 1rem;
  padding-bottom: 2rem;
}
h1 {
  max-width: 80%;
  margin: 1.7rem auto;
}
@media only screen and (min-width: 600px) {
  div.home-content {
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 767px) {
  div.home-content {
    .card-container {
      display: flex;
      flex-direction: row;
      &.title {
        .card {
          width: calc(100% - 4rem);
        }
      }
      .card {
        margin: 2rem 1rem;
      }
    }
  }
}
</style>